<template>
    <!-- 欢迎界面 -->
    <div v-if="code === '0'" class="flex flex-col min-h-screen bg-gray-100">
        <div class="text-center pt-[20vh]">
            <h1 class="text-5xl font-semibold text-gray-800">欢迎使用地中海贫血筛查系统！</h1>
        </div>
        <div class="flex-grow flex justify-center items-center">
            <div class="flex flex-row space-x-8">
                <button @click="code = '1'" class="w-80 h-32 bg-[#7FC4B9] text-white text-2xl font-semibold rounded-lg shadow-md transform transition duration-300 hover:scale-105 hover:shadow-lg">创建患者档案</button>
                <button @click="code = '2'" class="w-80 h-32 bg-[#9AC2C9] text-white text-2xl font-semibold rounded-lg shadow-md transform transition duration-300 hover:scale-105 hover:shadow-lg">创建检测记录</button>
                <button @click="goMyPatient" class="w-80 h-32 bg-[#037DAF] text-white text-2xl font-semibold rounded-lg shadow-md transform transition duration-300 hover:scale-105 hover:shadow-lg">查看检测结果</button>
            </div>
        </div>
    </div>

    <!-- 创建患者档案界面 -->
    <create-patient v-if="code === '1'" @back="code = '0'" />
    <!-- 患者列表界面 -->
    <PatientList v-if="code === '2'" @back="code = '0'" />
    <!-- 创建检测记录界面 -->
    <create-record v-if="code === '3'"  @back="TogetMyPatient" />
    <!-- 患者详情界面 -->
    <patient-details v-if="code === '4'" @newRecord="code = '2'"  />
</template>
<script>
import PatientList from '../../components/PatientList.vue';
import CreateRecord from '../../components/CreateRecord.vue';
import CreatePatient from '../../components/CreatePatient.vue';
import PatientDetails from '../../components/PatientDetails.vue';

export default {
    components: {
        PatientList,
        CreateRecord,
        CreatePatient,
        PatientDetails
    },
    data() {
        return {
            code: '',
        };
    },
    watch: {
        record: {
            handler(newVal, oldVal) {
                if (newVal.recordId !== null && newVal.isShow && Object.keys(newVal.imgDetail).length && Object.keys(newVal.bloodDrooping).length) {
                    this.code = '4';
                } else if (newVal.recordId !== null) {
                    this.code = '3';
                } else if (this.code === '2') {
                    this.code = '2';
                } else {
                    this.code = '0';
                }
            },
            deep: true, // 深度监听，检测对象内部属性的变化
            immediate: true // 立即执行一次，用于初始化
        }
    },
    computed: {
        record() {
            return this.$store.record;
        }
    },
    methods: {
        goMyPatient() {
            this.$router.push('/user/myPatient');
        },
        async TogetMyPatient() {
            this.code = '2';
            this.$store.record.clearRecordInfo();
        },

    }
};
</script>

<!-- css样式 -->
<style scoped></style>
